<script lang="ts" name="ContentWrap" setup>
import { propTypes } from '@/utils/propTypes'
import { useDesign } from '@/hooks/web/useDesign'
import { CollapseTree, OpenCollapseTree } from '@/layout/components/Collapse'

const { getPrefixCls } = useDesign()

const prefixCls = getPrefixCls('content-wrap')

defineProps({
  title: propTypes.string.def(''),
  message: propTypes.string.def(''),
  /* 新加入UI修改样式 */
  setPadding: {
    type: Boolean,
    default: true
  },
  isTree: {
    type: Boolean,
    default: false
  }
})
</script>

<template>
  <ElCard
    :class="[prefixCls, 'mb-3px']"
    class="amendClass"
    shadow="never"
    :body-style="{
      padding: setPadding ? '16px' : '0px' /* 新加入UI修改样式 */
    }"
    :style="{
      background: setPadding
        ? 'linear-gradient(180deg, #6bb3f6 0%, #e3f5ff 100%)'
        : '' /* 新加入UI修改样式 */,
      margin: 'var(--margin-right-width) 0 0 var(--margin-right-width) !important',
      position: 'relative'
    }"
  >
    <template v-if="title" #header>
      <div class="flex items-center">
        <span class="text-16px font-700">{{ title }}</span>
        <ElTooltip v-if="message" effect="dark" placement="right">
          <template #content>
            <div class="max-w-200px">{{ message }}</div>
          </template>
          <Icon :size="14" class="ml-5px" icon="ep:question-filled" />
        </ElTooltip>
      </div>
    </template>
    <div>
      <slot></slot>
    </div>
    <template v-if="isTree">
      <div class="closeTree">
        <CollapseTree class="hover-trigger" color="var(--top-header-text-color)" />
      </div>
    </template>
  </ElCard>
</template>
